<template>
  <div>
    <img
      class="logo"
      src="../assets/9.jpg"
      @click="$router.push({ name: 'NewHome' })"
    />
    <div class="news-detail">
      <div class="header">
        <h1>{{ newsDetail.title }}</h1>
        <div class="divider"></div>
      </div>
      <div class="meta">
        <p><span>类型:</span> {{ typeText[newsDetail.type] }}</p>
        <p><span>创建时间:</span> {{ newsDetail.createTime | timeFormat }}</p>
        <p><span>更新时间:</span> {{ newsDetail.updateTime | timeFormat }}</p>
      </div>
      <div
        class="content"
        style="white-space: pre-wrap; width: 100%; word-break: break-all"
      >
        <p v-html="newsDetail.content"></p>
        <template>
          <div class="image-container">
            <el-image
              v-if="newsDetail.picture"
              :src="newsDetail.picture"
              class="activity-image"
              @click="previewImage(newsDetail.picture)"
            ></el-image>
            <el-image
              v-if="newsDetail.picture"
              :src="newsDetail.cover"
              class="activity-image"
              @click="previewImage(newsDetail.cover)"
            ></el-image>
          </div>
          <!-- 图片预览覆盖层 -->
          <div
            v-if="isPreviewVisible"
            class="image-preview-overlay"
            @click="closePreview"
          >
            <img :src="previewImageUrl" class="preview-image" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "NewsDetail",
  props: ["id"],
  data() {
    return {
      isPreviewVisible: false,
      dialogVisible: false,
      previewImageUrl: "",
      newsDetail: {},
      typeText: {
        1: "广西民族大学",
        2: "闽江师范高等专科学校",
        3: "福州市艺术学校",
        4: "中山大学",
        5: "香港中文大学",
        6: "印尼丹戎布拉大学孔院",
        7: "印尼阿拉扎大学",
        8: "泰国马哈沙拉坎大学",
        9: "老挝国立大学",
        10: "土耳中资民企商会",
        11: "印尼中资民企商会",
        12: "厄瓜多尔中华桥乡中心",
        13: "广西'桂姐姐'心理教育",
        14: "'茉莉姐姐'亲子教育工作室",
        15: "到海峡的另一边去",
        16: "顶梁柱母亲心理服务",
        17: "中学心理筛查",
        18: "'青苗计划'社区家长课堂",
        19: "守护星星畅享才艺",
        20: "成长助学",
        21: "义工风采",
      },
    };
  },
  created() {
    this.loadNewsDetail();
  },
  methods: {
    goHome() {
      console.log(1);
    },
    loadNewsDetail() {
      request
        .getRequest(`api/essay/detail/${this.id}`)
        .then((res) => {
          if (res && res.data) {
            this.newsDetail = res.data.data;
          }
        })
        .catch((error) => {
          console.error("Error loading news detail:", error);
        });
    },
    handlePreviewImage(url) {
      this.previewImageUrl = url;
      this.dialogVisible = true;
    },
    previewImage(url) {
      this.previewImageUrl = url;
      this.isPreviewVisible = true;
    },
    closePreview() {
      this.isPreviewVisible = false;
      this.previewImageUrl = "";
    },
  },
};
</script>

<style scoped>
.news-detail {
  width: 1200px;
  margin: auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  overflow: hidden;
  /* background-image: linear-gradient(to bottom right, #f7f7f7, #e8e8e8); */
}

.header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.header h1 {
  font-size: 28px;
  color: #333;
  font-weight: bold;
}

.divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: #007bff;
}

.meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.meta p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  flex: 1;
  text-align: left;
}

.meta p span {
  font-weight: bold;
}

.meta p:hover span {
  color: #007bff;
  cursor: pointer;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  min-height: 200px;
}

.content p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.image-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.activity-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  margin: 10px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.activity-image:hover {
  transform: scale(1.05);
}

.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
</style>
